<template>
	<div id="page" :style="{top:S_top + 'px' }">
		<img class="page-bg" src="../../assets/app-bg.jpg" >
		<van-nav-bar class="navTop" :title="$t('header.Order')"></van-nav-bar>
		<div class="main" ref="MainScroll"  @touchmove="S_move" @touchend="S_end" >
			<div class="box">
				<div class="tit">
					{{$t('page.underway')}}
					<div class="t-r">{{$t('page.Residual_documentary')}} {{gd_num_left}} </div>
				</div>
				<div class="bor" v-for="(item , i) in orderData" v-if="item.order_time > 0">
					<div class="hua">{{item.income}}USDT/BTC {{$t('page.Success')}}：{{item.succ_rate}}%</div>
					<div class="guo">
						<label>{{item.exchange_a}}</label>
						<div class="line"></div>
						<label>{{item.exchange_b}}</label>
					</div>
          <div class="type" v-if="i == 0">{{ $t('aut.稳健型')}}</div>
          <div class="type" v-if="i == 1">{{ $t('aut.激进型')}}</div>
					<div class="time">
						{{item.order_time}}S
						<!-- <text>距离结束</text> -->
					</div>
					<div class="bottom">
						<div :class="item.order_time > 0 ? 'btn-c-lan':'hui'" class="btn " @click="onTrade(i)" >{{$t('page.documentary')}}</div>
					</div>
				</div>
			</div>

			<div class="box">
				<div class="tab" :class="tab_i == 2 ? 'tab2' : '' " >
					<div class="li" @click="tab(1)">{{$t('page.Has_ended')}} </div>
					<div class="li" @click="tab(2)">{{$t('page.My_participation')}}</div>
					<div class="line"></div>
				</div>

				<div v-if="tab_i == 1" class="tab-main">
					<div class="bor" v-for="item in endOrder">
						<div class="guo">
							<div class="Tic">{{item.exchange_a}}<label class="price">{{item.price_a}}</label></div>
							<div class="line"></div>
							<div class="Tic">{{item.exchange_b}}<label class="price">{{item.price_b}}</label></div>
						</div>
						<div class="kuai">
							<div class="bok">{{item.join_num}}<p>{{$t('page.Number_of_people')}} </p></div>
							<div class="bok">
                {{item.income>0 ? '+':''}}
                {{item.income}} USDT/BTC<p>{{$t('page.profit')}}</p></div>
						</div>
					</div>
				</div>

				<div v-else class="tab-main">
					<div class="record" @click="record">{{$t('page.gd_order')}}>></div>

					<img class="nodata" v-if="joinOrder.length == 0" src="../../assets/nodata.png" >
					<div class="bor" v-for="item in joinOrder">
						<div class="date">{{$t('page.Documentary_date')}} :{{item.date}}  <label class="fr">{{item.multiple}}X</label></div>
						<div class="hua">{{$t('page.Order_revenue')}}：{{item.income}}</div>
						<div class="guo">
							<div class="Tic">{{item.exchange_a}}<label class="price">{{item.price_a}}</label></div>
							<div class="line"></div>
							<div class="Tic">{{item.exchange_b}}<label class="price">{{item.price_b}}</label></div>
						</div>
						<div class="kuai">
							<div class="bok">{{item.gd_amount}}<p>{{$t('page.User_documentary_amount')}} </p></div>
							<div class="bok">
							{{item.customer_income>0 ? '+':''}}
							{{item.customer_income}}USDT<p>{{$t('page.User_documentary_revenue')}}</p></div>
						</div>
					</div>
				</div>
			</div>

			<tabs-footer tab = "Order"></tabs-footer>
		</div>

		<!-- 跟单 -->
		<order-money @gddocu="gd_Num"  ref='Trade'></order-money>

    <exch-order v-if="orderShow" @gddocu="gd_Num" :type="otype" :oid="oid" @close="orderShow = false"></exch-order>

	</div>
</template>

<script>
	import TabsFooter from '../../components/tabs/tabs-footer.vue'
	import OrderMoney from "../../components/Order_money.vue"
  import exchOrder from "@/views/Automatic/components/ExchOrder";

	import {mapState} from "vuex";
	import { Toast } from 'vant';
	 import Web3 from "web3";
	export default {
		name:"Order",
		components: {TabsFooter , OrderMoney , exchOrder},
		data() {
			return {
				tab_i:1,
				orderData:[],
				downTimer:null,
				gd_num_left: 0,
				endOrder:[],
				joinOrder:[],
				adderss:"",

				S_qi:0,
				S_top:0,

        orderShow:false,
        otype:0,
        oid:0,
			}
		},

		mounted(){

      this.Staer(); //倒计时开始
			this.gdNum();		//剩余
			this.EndOrder();  //已结束
			// this.JoinOrders();  //我的参与

      this.Order_sev(0)
      this.Order_sev(1);


		},
		computed: {
			...mapState({
				user: state => state.user,
			})
		},
		watch: {
			'user': function(e) {
        console.log(e)
				this.gdNum();		//剩余
				this.EndOrder();  //已结束
				this.userData = e;
				this.$forceUpdate();
			}
		},
		destroyed(){
			console.log("离开")
			clearTimeout(this.downTimer)
		},

		methods: {
			record(){
				this.$router.push({
					name:'gd_order',
          query:{isAuto:0}
				})
			},

			Staer(){
				var orderData = this.orderData;
				this.downTimer = setInterval(() => {
					if(orderData.length < 2){
						this.Order_sev(orderData.length);
            return;
					}

					for (var i = 0; i < orderData.length; i++) {

						var time = orderData[i].order_time - 1;
						if(time < 0){
							time = 0
						}
						this.orderData[i].order_time = time;
						if(time < 1){
							var e = i ;
							this.Order_sev(e)
						}

					}
					this.$forceUpdate();
				}, 1000)

			},

			tab(e){
				var tab = this.tab_i;
				if( tab != e){
					this.tab_i = e;
				}
				this.JoinOrders();  //我的参与
			},
			gd_Num(e){
				console.log(e)
				this.gd_num_left = e;
			},
			async gdNum(){
				if(this.$dapp.getAddress()){
					const { err, res } = await this.$request.get("/chss/trasactionOrder/gd_num_left", {
						address:this.$dapp.getAddress()
					});
					if (err === null) {
						console.log(res)
						this.gd_num_left = res.gd_num_left
					}
				}
			},
			async Order_sev(i){
        var type = i + 2;
        console.log(type)
        console.log('跟单：'+type , this.user.address);

        const { err, res } = await this.$request.get("/chss/trasactionOrder/trade_orders", {
          order_num: type,
        });
        if (err === null) {
          var e = i;

          if(res.order_time > 5){
            this.orderData[e] = res;
            this.$forceUpdate();
          }else {
            this.Order_sev(e);
          }
        }


			},

			async EndOrder(){
        if(this.user.address){
          const { err, res } = await this.$request.get("/chss/trasactionOrder/finish_orders", {
            address: this.user.address
          });
          if (err === null) {
            this.endOrder = res
            this.$forceUpdate();
          }
        }

			},
			async JoinOrders(i){
        if(this.user.address){
					const { err, res } = await this.$request.get("/chss/userTrasaction/joined_orders", {
						address: this.user.address,
            isAuto:0
					});
          if (err === null) {
						this.joinOrder = res;
						this.$forceUpdate();
					}
				}
			},

			onTrade:function(e){
				var data = this.orderData[e];
				console.log(data)
				if( this.gd_num_left > 0 ){
					// var order_id = data.order_number;
					// this.$refs.Trade.show(order_id);

          this.otype = e;
          this.oid = data.order_number;
          this.orderShow = true;
					return;
				}else{
					Toast.success(this.$t('tis.numMei'))
					console.log('今天的次数已经用完了')
				}

			},

			Scroll(){ //监听滚动
				var top = this.$refs.MainScroll.scrollTop;		//滚动
				console.log(top)
				if(top == 0){
					this.down = true;
				}else{
					this.down = false;
				}
			},
			S_move(e){ //监听滚动
				var top = this.$refs.MainScroll.scrollTop;		//滚动
				var tuo = e.changedTouches[0].pageY
				if(top == 0 && this.S_qi == 0 ){
					this.S_qi = tuo;
				}else if(top > 0){
					this.S_qi = 0
				}else if(this.S_qi > 0 && tuo > this.S_qi ){
					this.S_top = tuo - this.S_qi;
				}
			},
			S_end(){
				if(this.S_top > 50 ){
					this.$parent.reload()
				}
				this.S_qi = 0;
				this.S_top = 0;
			}




		}
	}
</script>

<style lang="scss" scoped>
	#page{
		position: relative;
		overflow: scroll;
	}

	.main{overflow: scroll;}

	.record{text-align: right; text-decoration: underline; color:#6161ff}


	.box{padding:0px 30px; box-sizing: border-box;}

	// .hr{height: 20px; background: #29334c;}

	.tit{
		color: #FFF; line-height: 80px;
		.t-r{float: right;color: #ce9d11;}
	}
	.bor{
		border: 2px solid #fff; border-radius: 10px;
		padding:20px 30px; box-sizing: border-box;
		margin-top: 10px; margin-bottom: 60px;
		position: relative;color: #eee;
		background: rgba(0 , 0 , 0, 0.3 );

		.hua{color: #ce9d11; margin-top: 10px; font-size: 26px; text-align: center; }
    .type{color: #ce9d11; margin-top: 10px; font-size: 26px; text-align: center;}

		.guo{
			display: flex;

			.Tic{text-align: center;
				.price{display: block;}
			}

			.line{
				flex: 1; margin: 0px 30px; position: relative;
				height: 25px; border-bottom: 2px dashed #409ab8;
				&::before{
					content: "";
					display: block; width: 10px; height: 10px;
					border: 1px solid #409ab8;
					border-bottom-color:transparent;
					border-left-color:transparent;

					transform:rotate(45deg);
					-webkit-transform:rotate(45deg); /* Safari 和 Chrome */
					-ms-transform:rotate(45deg); 	/* IE 9 */
					-moz-transform:rotate(45deg); 	/* Firefox */
					-o-transform:rotate(45deg); 	/* Opera */

					position: absolute; right: 0px; top: 18px;
				}
			}

		}
		.time{
			text-align: center; font-size: 40px;
			margin: 30px; font-weight: 100;
			text{display: block; line-height: 50px; font-size: 25px; color:#394d7d}
		}
		.date{
			height: 50px;border-bottom: 2px solid #FFF;
			.fr{float: right;}
		}

		.kuai{
			display: flex; padding:30px 0px;
			.bok{flex: 1; text-align: center;
				font-size: 30px;
				p{display: block; color:#999; font-size: 26px; margin-top: 10px; }
			}
			& .bok:nth-child(2){border-left: 1px solid #2979FF;}
		}

		.bottom{
			height: 10px; text-align: center;
			.btn{
				display: inline-block;
				color: #333; line-height: 60px;
				width: 200px; text-align: center;
				border-radius: 50px;
				position: absolute;
				bottom: -30px;left: 50%; margin-left: -100px;
			}
			.btn.hui{background: #999; color:#666;}
		}
	}

	.tab{
		display: flex; position: relative; z-index: 1;
		border-bottom: 4px solid #188AFF; overflow: hidden;
		margin-bottom: 30px;

		.li{flex: 1; text-align: center; line-height: 80px; color: #fff; }

		.line{
			height: calc(100% + 10px);  width: 50%; background:#188AFF;
			position: absolute; z-index: -1;
			bottom: -10px; left: 0%;
			border-radius: 10px;

			transition: all 0.3s;
			-webkit-transition: all 0.3s; /* Safari 和 Chrome */
			-ms-transition: all 0.3s; 	/* IE 9 */
			-moz-transition: all 0.3s; 	/* Firefox */
			-o-transition: all 0.3s;	/* Opera */

		}

		&.tab2{
			.line{left: 50%;}
		}

	}

	.tab-main{
		overflow: hidden;
	}
</style>
